/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
  Image,
  TouchableOpacity,
} from 'react-native';
var CarData = require('./Car.json');

var CListViewDemo = React.createClass({
    getDefaultProps()
    {

    },
    //初始化函数
    getInitialState(){
     var getSectionData = (_dataBlob, sectionID) => {
       return _dataBlob[sectionID];
     }
     var  getRowData = (_dataBlob,sectionID,rowID) =>
     {
       return _dataBlob[sectionID + ':' + rowID];
     }
      return{
        dataSource: new ListView.DataSource({
            getSectionData: getSectionData,//获取组中数据
            getRowData: getRowData,//获取行中数据
            rowHasChanged: (r1, r2) => r1 !== r2,
            sectionHeaderHasChanged: (s1, s2) => s1 !== s2
        })
      }
    },
    //复杂操作:数据请求 或者 异步操作（定时器）
    componentDidMount()
    {//调用json数据
        this.loadDataFromJson();

    },
    loadDataFromJson()
    {
      //拿到json数据
        var jsonData = CarData.data;
        //定义相关变量
        var  dataBlob = {},
            sectionIDs = [],
            rowIDs = [];
            cars = [];
        //遍历
        for (var i=0; i<jsonData.length; i++){
          //1.把组号放入sectionIDs数组中
            sectionIDs.push(i);
            //2. 把组中内容放进dataBlob
            dataBlob[i] = jsonData[i].title;
            //3.取出该组中的row
           cars = jsonData[i].cars;
           rowIDs[i] = [];
           //遍历所有车数组
            for (var j=0; j<cars.length; j++)
            {
              //把行号放入rowIDs
                rowIDs[i].push(j);
                //把每一行中的内容放入dataBlob对象中
                dataBlob[i+':'+j] = cars[j];
            }
        }
        //更新状态
        this.setState({
            dataSource:this.state.dataSource.cloneWithRowsAndSections(dataBlob,sectionIDs,rowIDs)
        });

    },
    render(){
        return(
            <View style={styles.outerViewStyle}>
              <View style={styles.headerViewStyle}>
                    <Text style={{color:'white', fontSize:25}}>主页</Text>
              </View>
              <ListView
                  dataSource={this.state.dataSource}
                  renderRow={this.renderRow}
                  renderSectionHeader={this.renderSectionHeader}
              />
            </View>

        )
    },
    renderRow(rowData)
    {
      return(
          <TouchableOpacity activeOpacity={0.5}>
            <View style={styles.rowStyle}>
              <Image source={{uri: rowData.icon}} style={styles.rowImageStyle}/>
              <Text style={{marginLeft:10}}>
                  {rowData.name}
              </Text>
            </View>
          </TouchableOpacity>
      )
    },
    renderSectionHeader(sectionData,sectionID){
      return(
          <View style={styles.sectionheaderViewStyle}>
            <Text style={{marginLeft:10, color:'red'}}>
                {sectionData}
            </Text>
          </View>
      )


    }
})


const styles = StyleSheet.create({
    outerViewStyle:{
      flex:1,
    },
    headerViewStyle:{
        height:64,
        backgroundColor:'orange',
        justifyContent:'center',
        alignItems:'center',
    },
    rowStyle:{
      //设置主轴的方向
        flexDirection:'row',
        alignItems:'center',
        padding:10,
        borderBottomWidth: 0.5,
        borderBottomColor: '#e8e8e8'
    },
    rowImageStyle:{
      width:70,
      height:70,

    },
    sectionheaderViewStyle:{
      justifyContent:'center',
      backgroundColor:'#e8e8e8',
      height:25
    }
});

AppRegistry.registerComponent('CListViewDemo', () => CListViewDemo);
